<template>
  <page-header-wrapper :title="false">
    <a-card>
      <a-tabs @change="onTabs">
        <div slot="tabBarExtraContent">
          所有通话
          <a-divider type="vertical" />
          <span class="font16">通时有10秒左右的延时</span>
          <a-divider type="vertical" />
          <span class="font16">今日通时 {{ (callData.today_call_duration/60).toFixed(2) }}min</span>
          <a-divider type="vertical" />
          <span class="font16">今日通次 {{ callData.today_call_num }}次</span>
          <a-button size="small" type="danger" style="margin-left: 20px;" ghost @click="refresh">刷新</a-button>
        </div>
        <a-tab-pane key="1" tab="APP拨号"></a-tab-pane>
        <a-tab-pane key="2" tab="软件拨号"></a-tab-pane>
        <a-tab-pane key="4" tab="AX模式"></a-tab-pane>
      </a-tabs>
      <nan-fang v-if="currentTab == 1"></nan-fang>
      <kao-la v-if="currentTab == 2"></kao-la>
      <ax-modal v-if="currentTab == 4"></ax-modal>
    </a-card>
  </page-header-wrapper>
</template>

<script>
  import NanFang from './components/NanFang'
  import KaoLa from './components/KaoLa'
  import AxModal from './components/AxModal'
  import { getCallNum } from '@/api/common'

  export default {
    components: {
      NanFang,
      KaoLa,
      AxModal
    },
    name: 'AllCalls',
    data () {
      return {
        callData: {},
        currentTab: '1'
      }
    },
    created () {
      this.getCallData()
    },
    methods: {
      getCallData () {
        const app = this
        getCallNum().then(res => {
          if (res.status === 0) {
            app.callData = res.result
          }
        })
      },
      onTabs (key) {
        this.currentTab = key
      },
      refresh () {
        window.location.reload()
      }
    }
  }
</script>

<style scoped>
  .font16{
    font-size: 14px !important;
    color: #f36a5a;
  }
</style>
